{% extends "base_generic.html" %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h1 class="mb-0"><i class="fas fa-book"></i> 本地图书馆首页</h1>
        </div>
        <div class="card-body">
            <div class="jumbotron bg-light p-4 mb-4 rounded">
                <p class="lead">欢迎来到<em>本地图书馆</em>，这是一个基于Django开发的简单网站。</p>
                <hr class="my-4">
            </div>

            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h2 class="mb-0"><i class="fas fa-chart-line"></i> 动态内容</h2>
                </div>
                <div class="card-body">
                    <p class="card-text">图书馆当前有以下记录数量：</p>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><i class="fas fa-book"></i> <strong>书籍：</strong> {{ num_books }}</li>
                        <li class="list-group-item"><i class="fas fa-copy"></i> <strong>副本：</strong> {{ num_instances }}</li>
                        <li class="list-group-item"><i class="fas fa-check-circle"></i> <strong>可借副本：</strong> {{ num_instances_available }}</li>
                        <li class="list-group-item"><i class="fas fa-user-edit"></i> <strong>作者：</strong> {{ num_authors }}</li>
                    </ul>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-body">
                    <p><i class="fas fa-eye"></i> 您已访问此页面 {{ num_visits }} 次。</p>
                </div>
            </div>

            <div class="card">
                <div class="card-header bg-info text-white">
                    <h2 class="mb-0"><i class="fas fa-project-diagram"></i> UML模型</h2>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <img src="{% static 'images/local_library_model_uml.png' %}" alt="UML图" class="img-fluid" style="max-width: 800px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}